<template>
  <div class="payment_status">
    <div class="status_top">
      <van-icon :name="statusIcon" :class="statusClass"/>
      <div>{{statusText}}</div>
    </div>

    <div class="status_text" v-if="isSuccess">
      <span class="red">3秒</span>跳转订单
    </div>
    <div class="status_text" v-else>系统繁忙, 支付遇到问题, 请您稍后再试!</div>

    <div class="status_goLink">
      <router-link class="red" :to="{name: 'user'}">查看订单
        <van-icon name="arrow"/>
      </router-link>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'payment-status',

    props: {
      status: String
    },
    created() {
      setTimeout(() => {
        this.$router.push({path: '/user/order/list/0'});
      }, 3000);
    },
    data() {
      return {
        isSuccess: true
      };
    },

    computed: {
      statusText() {
        return this.isSuccess ? '支付成功' : '支付失败';
      },
      statusIcon() {
        return this.isSuccess ? 'checked' : 'fail';
      },
      statusClass() {
        return this.isSuccess ? 'success_icon' : 'fail_icon';
      }
    },

    activated() {
      this.isSuccess = this.status === 'success';
    }
  };
</script>


<style lang="scss" scopd>
  .payment_status {
    padding-top: 30px;
    box-sizing: border-box;
    background-color: #fff;
    text-align: center;
  }

  .status_top {
    margin-bottom: 15px;

    i {
      margin-bottom: 5px;
    }

    > div {
      font-size: 18px;
    }
  }

  .status_text {
    color: $font-color-gray;
    margin-bottom: 50px;
  }

  .status_icon {
    font-size: 80px;
  }

  i.success_icon {
    @extend .status_icon;
    color: #06bf04;
  }

  i.fail_icon {
    @extend .status_icon;
    color: #f44;
  }
</style>
